<template>
  <!-- 加人详情 -->
  <div>
    <el-card>
      <div class="page-title">
        <span>加人详情</span>
      </div>
    </el-card>
    <el-card style="margin-top: 20px;">
      <el-form ref="queryForm" :model="queryForm" size="small">
        <el-row style="display: flex;flex-wrap: wrap;">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" style="padding: 0;">
            <el-form-item prop="wxAddStatus">
              <el-select v-model="queryForm.wxAddStatus" placeholder="状态" style="width: 100%;" clearable>
                <el-option v-for="item in statusList" :key="item.dictValue" :value="item.dictValue"
                  :label="item.dictLabel" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" style="padding: 0;">
            <el-form-item prop="selectDate">
              <el-date-picker v-model="queryForm.selectDate"
                @change="(val) => dateChange(val, { fileBytes: ['startDate', 'endDate'] }, 'queryForm')"
                type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" style="padding: 0;">
            <el-form-item>
              <div style="float: right;">
                <el-button type="primary" icon="el-icon-search" @click="handleQuery" size="mini">查 询</el-button>
                <el-button type="info" icon="el-icon-refresh" plain @click="handleReset" size="mini">重 置</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px;">
      <div style="float: right;margin-bottom: 15px;">
        <el-button type="primary" size="mini" @click="downLoadFile" v-has-permi="['admin:phone:export']">一键导出</el-button>
      </div>
      <el-table v-loading="loading" :data="tableList" height="442px">
        <el-table-column label="电话号码" prop="mobile" align="center" />
        <el-table-column label="昵称" prop="wechatNickname" align="center" />
        <el-table-column label="备注名" prop="cusName" align="center" />
        <el-table-column label="超级企微" prop="automateId" align="center" />
        <el-table-column label="发送状态" prop="wxAddStatus" align="center">
          <slot slot-scope="scope">
            <el-tag v-if="scope.row.wxAddStatus == '未发送'" class="el-tag-1">未发送</el-tag>
            <el-tag v-if="scope.row.wxAddStatus == '已发送'" class="el-tag-2">已发送</el-tag>
            <el-tag v-if="scope.row.wxAddStatus == '添加成功'" class="el-tag-3">添加成功</el-tag>
            <el-tag v-if="scope.row.wxAddStatus == '添加失败'" class="el-tag-4">添加失败</el-tag>
          </slot>
        </el-table-column>
        <el-table-column label="添加时间" prop="updateTime" align="center" />
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
        @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </el-card>
  </div>
</template>

<script>
import { queryOcPhoneList } from '@/api/intelligentOutCall'
import moment from "moment/moment";
import {downLoadFile} from "@/utils/common";
export default {
  name: 'AddDetails',
  data() {
    return {
      loading: false,
      statusList: [
        {dictLabel: '全部状态', dictValue: ''},
        {dictLabel: '未发送', dictValue: '0'},
        {dictLabel: '已发送', dictValue: '1'},
        {dictLabel: '添加成功', dictValue: '2'},
        {dictLabel: '添加失败', dictValue: '3'},
      ],
      form: {},
      queryForm: {
        selectDate: null,
        startDate: '',
        endDate: '',
        wxAddStatus: '',
        pageNum: 1,
        pageSize: 20,
      },
      total: 0,
      tableList: [],
    }
  },
  methods: {
    getListFn(){
      let obj = {
        startDate: this.queryForm.startDate,
        endDate: this.queryForm.endDate,
        wxAddStatus: this.queryForm.wxAddStatus,
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
        ocLeadNo: this.$route.query.id
      }
      this.loading = true
      queryOcPhoneList(obj).then(res => {
         this.loading = false
         if(res.code == 200){
           this.tableList = res.rows || []
           this.total = res.total || 0
         }
      }).catch(() => {
        this.loading = false
      })
    },
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getListFn()
    },
    handleReset() {
      this.queryForm = {
        selectDate: null,
        startDate: '',
        endDate: '',
        wxAddStatus: '',
        pageNum: 1,
        pageSize: 20,
      }
      this.handleQuery()
    },
    // 翻页
    handleSizeChange(value) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = value
      this.getListFn()
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.getListFn()
    },
    // range 日期change事件
    dateChange(val, item, byte) {
      let valNew = val || ["", ""];
      item.fileBytes.forEach((fileByte, index) => this.$set(this[byte], fileByte, valNew[index]));
    },
    downLoadFile(){
      const params = {
        ocLeadNo: this.$route.query.id,
      }
      let fileName = this.$route.query.ocLeadName + '-' + moment(new Date()).format('YYYYMMDD') + '-' + this.$route.query.id + '.xlsx'
      downLoadFile('/admin/oc/phone/export', params, fileName)
    },
  },
  mounted() {
    this.handleQuery()
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

::v-deep.el-tag-1 {
  background: rgba(153, 153, 153, 0.1) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(204, 204, 204, 0.2) !important;
  color: #999999 !important;
}

::v-deep.el-tag-2 {
  background: rgba(255, 173, 58, 0.1) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255, 173, 58, 0.1) !important;
  color: #FFAD3A !important;
}

::v-deep.el-tag-3 {
  background: rgba(20, 213, 149, 0.1) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(20, 213, 149, 0.1) !important;
  color: #14D595 !important;
}

::v-deep.el-tag-4 {
  background: rgba(252, 88, 48, 0.1) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(252, 88, 48, 0.1) !important;
  color: #082aff !important;
}
</style>
